<template>
  <StackLayout class="root">
    <StackLayout class="top" orientation="horizontal">
      <Image class="photo" src="~/images/avatar.png" @tap="tryOpenSomething"/>
      <Label class="name" text="Your Account" verticalAlignment="center"/>
    </StackLayout>
     <StackLayout class="line" orientation="horizontal" @tap="tapOrder">
      <Image class="icon" src="~/images/order_normal.png"/>
      <Label class="title" text="Open Orders" verticalAlignment="center"/>
    </StackLayout>
    <StackLayout class="line" orientation="horizontal" @tap="tapHistoryOrder">
      <Image class="icon" src="~/images/history.png"/>
      <Label class="title" text="History Orders" verticalAlignment="center"/>
    </StackLayout>
    <StackLayout class="line" orientation="horizontal" @tap="tapHistoryTransaction">
      <Image class="icon" src="~/images/transaction.png"/>
      <Label class="title" text="Transaction History" verticalAlignment="center"/>
    </StackLayout>
    <StackLayout class="line" orientation="horizontal" @tap="tapSecurity">
      <Image class="icon" src="~/images/security.png"/>
      <Label class="title" text="Security" verticalAlignment="center"/>
    </StackLayout>
    <StackLayout class="line" orientation="horizontal" @tap="tapSettings">
      <Image class="icon" src="~/images/settings.png"/>
      <Label class="title" text="Settings" verticalAlignment="center"/>
    </StackLayout>
    <StackLayout class="line" orientation="horizontal" @tap="tapAbout">
      <Image class="icon" src="~/images/about.png"/>
      <Label class="title" text="About" verticalAlignment="center"/>
    </StackLayout>
  </StackLayout>
</template>
<script>
import Orders from '~/components/Orders'
import OrderHistory from '~/components/History'
import Settings from '~/components/Settings'
import Security from '~/components/Security'
import Transaction from '~/components/TransactionHistory'
import About from '~/components/common/About'
require( "nativescript-localstorage" )

export default {
  methods: {
    tapOrder() {
      this.$navigateTo(Orders)
    },
    tapHistoryOrder() {
      this.$navigateTo(Orders, {
        props: {
          isHistory: true,
          title: 'History Orders'
        }
      })
    },
    tapSettings() {
      this.$navigateTo(Settings)
    },
    tapSecurity() {
      this.$navigateTo(Security)
    },
    tapHistoryTransaction() {
      this.$navigateTo(Transaction)
    },
    tapAbout() {
      this.$navigateTo(About)
    },
    tryOpenSomething() {
      if (!this.count) {
        this.count = 1
      } else {
        this.count += 1
        if (this.count == 4) {
          prompt({
            title: "Change server address",
            okButtonText: "OK",
            cancelButtonText: "Cancel",
            defaultText: "https://7exdevapp.azurewebsites.net/api",
          }).then(result => {
            if (result.result) {
              localStorage.setItem('7HOST', result.text)
              alert('Change success. Relaunch the app')
            }
          });
        }
      }
    }
  },
}
</script>
<style scoped>
.root {
  background: #203956;
}
.top {
  height: 140;
  background: #1C344F;
  padding-left: 12;
}
.photo {
  width: 80;
  height: 80;
}
.name {
  font-size: 28;
  color: #fff;
  margin-left: 10;
}
.line {
  height: 50;
  border-bottom-width: 1;
  border-bottom-color: #2e4865;
  font-size: 16;
  color: white;
  padding-left: 23;
}
.icon {
  width: 22;
  height: 22;
  margin-right: 11;
}
</style>


